<template>
  <view>
    <!-- 头部 -->
    <view id="home" class="home-nav acea-row row-center-wrapper" :class="opacity>0.5?'on':''" :style="{ top: homeTop + 'rpx' }" v-if="returnShow" @tap="returns">
    	<image src="/static/arrow_left.svg" style="width: 24rpx;height: 48rpx" />
    </view>
<view class="fixedtime" v-if="missionId_p" :style="{ marginTop: homeTop + 'rpx' }"><text v-if="showCountdown">浏览{{seconds}}秒，</text>{{jdlist.length}}/{{wcjd.awards[0].view}}</view>
    <view class='product-con'>
      <scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style="'height:'+height+'px;'"
        @scroll="scroll">
        <view id="past0">
          <productConSwiper :imgUrls="imgUrls" class="mb30"></productConSwiper>
          <view class='nav acea-row row-between-wrapper mb30'>
						<view class='money'>￥<text class='num'>{{storeInfo.price}}</text><text class='y-money'>￥{{storeInfo.otPrice}}</text></view>
						<view class='acea-row row-middle'>
							<view class='time' v-if="status == 2">
								<view>距秒杀结束仅剩</view>
								<countDown :bgColor="bgColor" :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '"
								 :datatime="datatime"></countDown>
							</view>
						</view>
					</view>
          <view class="pad30">
            <view class='wrapper mb30'>
              <view class='introduce line2'>{{storeInfo.storeName}}</view>
              <view class='label acea-row row-between-wrapper'>
                <view class="flex-left">类型：{{storeInfo.people || 0}}人团</view>
                <view class="flex-left">累计销量：{{parseFloat(storeInfo.sales) + parseFloat(storeInfo.ficti)}} {{storeInfo.unitName || ''}}
                </view>
                <view class="flex-left">库存: {{ storeInfo.quotaShow ? storeInfo.quotaShow : 0 }}
                  {{storeInfo.unitName || ''}}
                </view>
              </view>
              <view class='label acea-row row-between-wrapper'>
                <view class="flex-left">商家: {{ storeInfo.merchant.name }}
                </view>
                <view class="flex-left">收货：{{storeInfo.consumeType == 0?'物流':storeInfo.consumeType == 1?'自提':''}}</view>
                <view class="flex-left">快递: 商家自行处理
                </view>
              </view>
            </view>
            <view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='selecAttr'
              v-if='attribute.productAttr.length'>
              <view class="line1">{{attr}}：<text class='atterTxt'>{{attrValue}}</text></view>
              <image src="/static/arrow_right.png" style="width:30rpx;height: 30rpx;"></image>
            </view>
            <view class='notice acea-row row-middle mb30 borRadius14' v-if="parseFloat(pinkOkSum) >0">
              <view class='num font-color'>
                <text class='iconfont icon-laba'></text>
                已拼{{pinkOkSum}}件<text class='line'>|</text>
              </view>
              <view class='swiper'>
                <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" duration="500"
                  vertical="true" circular="true">
                  <block v-for="(item,index) in itemNew" :key='index'>
                    <swiper-item>
                      <view style="line-height: 62rpx;">{{item.nickname}}拼团成功</view>
                    </swiper-item>
                  </block>
                </swiper>
              </view>
            </view>
            <view v-if='attribute.productSelect.quota > 0' class='assemble mb30 borRadius14'>
              <view class='item acea-row row-between-wrapper' v-for='(item,index) in pink' :key='index'
                v-if="index < AllIndex">
                <view class='pictxt acea-row row-between-wrapper'>
                  <view class='pictrue'>
                    <image :src='item.avatar'></image>
                  </view>
                  <view class='text line1'>{{item.nickname}}</view>
                </view>
                <view class='right acea-row row-middle'>
                  <view>
                    <view class='lack'>还差<text class='font-color'>{{item.count}}</text>人成团</view>
                    <view class='time acea-row'>
                      <count-down :is-day="false" :tip-text="'剩余 '" :day-text="' '" :hour-text="':'" :minute-text="':'"
                        :second-text="' '" :datatime="item.stopTime/1000" :bgColor="bgColor">
                      </count-down>
                    </view>
                  </view>
                  <navigator hover-class='none' :url="'/subpageC/combination_status/combination_status?id='+item.id"
                    class='spellBnt'>
                    去拼单
                    <text class='iconfont icon-jiantou'></text>
                  </navigator>
                </view>
              </view>
              <template v-if="pink.length">
                <view class='more' @tap='showAll' v-if="pink.length > AllIndex">查看更多<text
                    class='iconfont icon-xiangxia'></text></view>
                <view class='more' @tap='hideAll'
                  v-else-if="pink.length === AllIndex && pink.length !== AllIndexDefault">收起<text
                    class='iconfont icon-xiangshang'></text></view>
              </template>
            </view>
          </view>
        </view>

        <view class='product-intro' id="past2">
          <view class='title'>
            <span class="sp">产品详情</span>
          </view>
          <view class='conter'>
            <jyf-parser :html="storeInfo.content" ref="article" :tag-style="tagStyle"></jyf-parser>
          </view>
        </view>
        <view style='height:120rpx;'></view>
      </scroll-view>
      <view class='footer acea-row row-between-wrapper'>
        <view class="share"  v-if="isLogin">
          <image
            src="../../static//share2.svg"
            mode="widthFix"
          ></image>
            <button class="share-btn" open-type="share"></button>
        </view>
        <view class="bnt acea-row">
          <view class="buy bnts" @tap="goCat" v-if='attribute.productSelect.quota>0'>
            立即开团
          </view>
          <view class="buy bnts bg-color-hui" v-if="!dataShow">
            立即开团
          </view>
          <view class="buy bnts bg-color-hui" v-if='attribute.productSelect.quota <= 0'>
            已售罄
          </view>
        </view>
      </view>
    </view>
    <product-window :attr='attribute' :limitNum='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
      @ChangeCartNum="ChangeCartNum" @iptCartNum="iptCartNum" @attrVal="attrVal"></product-window>
  </view>
</template>

<script>
  const app = getApp();
  import {
    mapGetters
  } from "vuex";
  import productConSwiper from '@/components/productConSwiper'
  import {
    toLogin
  } from '@/libs/login.js';
  import {
    getCombinationDetail
  } from '@/api/activity.js';
  import parser from "@/components/jyf-parser/jyf-parser";
  import productWindow from '@/components/productWindow/index.vue'
  import countDown from '@/components/countDown/index.vue'

	import{
		getMissionDetail,getMissionDetailNew,getUserViewList,postMissionRecord
	} from '@/api/api.js';
  import {
    spread
  } from "@/api/user";
  export default {
    components: {
      productConSwiper,
      "jyf-parser": parser,
      "product-window": productWindow,
      countDown
    },
    computed: mapGetters(['isLogin','uid', 'missionId_p']),
    data() {
      return {
        bgColor: {
          'bgColor': '',
          'Color': '#999999',
          'isDay': true
        },
        userCollect: false,
        dataShow: 0,
        navH: '',
        id: 0,
        itemNew: [],
        indicatorDots: false,
        circular: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        attribute: {
          cartAttr: false,
          productAttr: [],
          productSelect: {}
        },
        productValue: [],
        productValueArr: [],
        isOpen: false,
        attr: '已选择',
        attrValue: '',
        AllIndex: 2,
        maxAllIndex: 0,
        replyChance: '',
        limitNum: 1,
        timeer: null,
        iSplus: false,
        navList: ['商品', '详情'],
        opacity: 0,
        scrollY: 0,
        topArr: [],
        toView: '',
        height: 0,
        heightArr: [],
        lock: false,
        scrollTop: 0,
        storeInfo: {},
        pinkOkSum: 0,
        pink: [],
        replyCount: 0,
        reply: [],
        imgUrls: [],
        sharePacket: {
          isState: true, //默认不显示
        },
        tagStyle: {
          img: 'width:100%;display:block;',
          table: 'width:100%',
          video: 'width:100%'
        },
        posters: false,
        weixinStatus: false,
        posterImageStatus: false,
        canvasStatus: false, //海报绘图标签
        storeImage: '', //海报产品图
        PromotionCode: '', //二维码图片
        posterImage: '', //海报路径
        posterbackgd: '/static/images/posterbackgd.png',
        navActive: 0,
        actionSheetHidden: false,
        attrTxt: '',
        cart_num: '',
        isAuto: false, //没有授权的不会自动授权
        isShowAuth: false, //是否隐藏授权
        AllIndexDefault: 0,
        imgTop: '',
        qrcodeSize: 600,
        H5ShareBox: false, //公众号分享图片
        onceNum: 0, //一次可以购买几个
        errT: '',
        returnShow: true,
        homeTop: 20,
        showCountdown:true,//是否显示倒计时
        interval_time:null ,
        jdlist:[],
        jding:[],
        wcjd:[],
        iftj:false
      }
    },
    onLoad(options) {
      let that = this
      this.$store.commit("PRODUCT_TYPE", 'normal');
      this.$nextTick(() => {
        // #ifdef MP
        const menuButton = uni.getMenuButtonBoundingClientRect();
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#home')
          .boundingClientRect(data => {
            this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
          })
          .exec();
        // #endif
      });
      // #ifdef MP
      this.navH = app.globalData.navHeight;
      // #endif
      // #ifndef MP
      this.navH = 96;
      // #endif
      //设置商品列表高度
      uni.getSystemInfo({
        success: function(res) {
          that.height = res.windowHeight
          //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
        },
      });
      if (options.id) {
        this.id = options.id;
      }
      this.combinationDetail();
    },
	mounted() {
	     this.startCountdown();
	 },
	 beforeDestroy() {
	     this.stopCountdown();
	 },
    methods: {
		//用户浏览列表
				
		 startCountdown() {
		if(this.missionId_p){
				this.iftj = true
			getMissionDetailNew(this.missionId_p).then(res=>{
				 console.log(res)
				 this.wcjd = res.data
			})
			getUserViewList({missionId:this.missionId_p}).then(res=>{
				this.jdlist = res.data
			
				res.data.map(item=>{
					if(item.productId == this.id){
						this.showCountdown = false
						this.iftj = false
						return false
					}
				})
			})
		}
			
		            this.showCountdown = true; // 显示倒计时
		            this.interval = setInterval(() => {
		                this.seconds--;
		            }, 1000);
		
		            setTimeout(() => {
		                this.stopCountdown();
		            }, 10000); // 1分钟后停止
		        },
		        stopCountdown() {
		            this.showCountdown = false; // 停止显示倒计时
					
		            clearInterval(this.interval);
					if(this.iftj&&this.seconds==0){
						postMissionRecord({
							missionId:this.missionId_p,
							productId:this.id,
							uid:this.uid
						}).then(res=>{
							uni.showToast({
								title:'浏览成功',
								icon:'none'
							})
							this.startCountdown()
						})
					}
		        },
      showAll: function() {
        this.AllIndexDefault = this.AllIndex;
        this.AllIndex = this.pink.length;
      },
      hideAll: function() {
        this.AllIndex = this.AllIndexDefault;
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e;
      },
      /**
       * 购物车手动填写
       * 
       */
      iptCartNum: function(e) {
        if (e > this.onceNum) {
          this.$util.Tips({
            title: `该商品每次限购${this.onceNum}${this.storeInfo.unitName}`
          });
          this.$set(this.attribute.productSelect, 'cart_num', this.onceNum);
          this.$set(this, "cart_num", this.onceNum);
        } else {
          this.$set(this.attribute.productSelect, 'cart_num', e);
          this.$set(this, "cart_num", e);
        }
      },
      // 返回
      returns() {
        uni.navigateBack();
      },
      // 获取详情
      combinationDetail() {
        var that = this;
        var data = that.id;
        getCombinationDetail(data).then(function(res) {
          that.dataShow = 1;
          uni.setNavigationBarTitle({
            title: res.data.storeCombination.storeName.substring(0, 16)
          })
          that.storeInfo = res.data.storeCombination;
          that.imgUrls = JSON.parse(res.data.storeCombination.sliderImage);
          that.attribute.productSelect.num = res.data.storeCombination.onceNum;
          that.userCollect = res.data.userCollect;
          that.pink = res.data.pinkList || [];
          that.itemNew = res.data.pinkOkList || [];
          that.pinkOkSum = res.data.pinkOkSum;
          that.attribute.productAttr = res.data.productAttr || [];
          that.productValue = res.data.productValue;
          let arr = []
          // 分开规格和值
          for (let key in res.data.productValue) {
            let obj = {
              label: key,
              value: res.data.productValue[key],
              price: res.data.productValue[key].price
            }
            arr.push(obj)
          }
          console.log(arr, 'arr-old')
          // 按照价格排序
          let newArr = arr.sort((a, b) => {
            return a.price - b.price
          })
          that.productValueArr = newArr
          that.onceNum = res.data.storeCombination.onceNum;

          //	that.PromotionCode = res.data.storeInfo.code_base

          that.imgTop = res.data.storeCombination.image;

          let productAttr = res.data.productAttr.map(item => {
            return {
              attrName: item.attrName,
              attrValues: item.attrValues.split(',').reverse(),
              id: item.id,
              isDel: item.isDel,
              productId: item.productId,
              type: item.type
            }
          });
          // 使用价格对attrValues排序


          that.$set(that.attribute, 'productAttr', productAttr);
          // that.setProductSelect();
          that.DefaultSelect();
        }).catch(function(err) {
          that.$util.Tips({
            title:JSON.stringify(err)
          }, {
            tab: 3
          })
        })
      },
      /**
       * 默认选中属性
       * 
       */
      DefaultSelect: function() {
        let self = this
        let productAttr = self.attribute.productAttr;
        let value = [];
        // for (var key in self.productValue) {
        //   if (self.productValue[key].quota > 0) {
        //     value = self.attribute.productAttr.length ? key.split(",") : [];
        //     break;
        //   }
        // }
        for (let i = 0; i < self.productValueArr.length; i++) {
          if (self.productValueArr[i].value.quota > 0) {
            value = self.productValueArr[i].label.split(",")
            break
          }
        }
        console.log(value, 'value-----')
        for (let i = 0; i < productAttr.length; i++) {
          self.$set(productAttr[i], "index", value[i]);
        }
        //sort();排序函数:数字-英文-汉字；
        let productSelect = self.productValue[value.join(",")];

        if (productSelect && productAttr.length) {
          self.$set(
            self.attribute.productSelect,
            "storeName",
            self.storeInfo.storeName
          );
          self.$set(self.attribute.productSelect, "image", productSelect.image);
          self.$set(self.attribute.productSelect, "price", productSelect.price);
          self.$set(self.attribute.productSelect, "unique", productSelect.id);
          self.$set(self.attribute.productSelect, "quota", productSelect.quota);
          self.$set(self.attribute.productSelect, "quotaShow", productSelect.quotaShow);
          self.$set(self.attribute.productSelect, "cart_num", 1);
          this.$set(this, "attrValue", value.join(","));
          this.$set(this, "attrTxt", "已选择");
        } else if (!productSelect && productAttr.length) {
          self.$set(
            self.attribute.productSelect,
            "storeName",
            self.storeInfo.storeName
          );
          self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
          self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
          self.$set(self.attribute.productSelect, "quota", 0);
          self.$set(self.attribute.productSelect, "quotaShow", 0);
          self.$set(self.attribute.productSelect, "unique", "");
          self.$set(self.attribute.productSelect, "cart_num", 0);
          self.$set(self, "attrValue", "");
          self.$set(self, "attrTxt", "已选择");
        } else if (!productSelect && !productAttr.length) {
          self.$set(
            self.attribute.productSelect,
            "storeName",
            self.storeInfo.storeName
          );
          self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
          self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
          self.$set(self.attribute.productSelect, "quota", 0);
          self.$set(
            self.attribute.productSelect,
            "unique", ""
          );
          self.$set(self.attribute.productSelect, "cart_num", 1);
          self.$set(self, "attrValue", "");
          self.$set(self, "attrTxt", "已选择");
        }
      },
      selecAttr: function() {
        this.attribute.cartAttr = true
      },
      onMyEvent: function() {
        this.$set(this.attribute, 'cartAttr', false);
        this.$set(this, 'isOpen', false);
      },
      /**
       * 购物车数量加和数量减
       * 
       */
      ChangeCartNum: function(changeValue) {
        //changeValue:是否 加|减
        //获取当前变动属性
        let productSelect = this.productValue[this.attrValue];
        if (this.buyNum === productSelect.quota) {
          return this.$util.Tips({
            title: '您已超出当前商品每人限购数量，请浏览其他商品'
          });
        }
        if (this.cart_num) {
          productSelect.cart_num = this.cart_num;
          this.attribute.productSelect.cart_num = this.cart_num;
        }
        //如果没有属性,赋值给商品默认库存
        if (productSelect === undefined && !this.attribute.productAttr.length) productSelect = this.attribute
          .productSelect;
        //无属性值即库存为0；不存在加减；
        if (productSelect === undefined) return;
        let quotaShow = productSelect.quota_show || 0;
        let quota = productSelect.quota || 0;
        let num = this.attribute.productSelect;
        let nums = this.storeInfo.onceNum || 0;
        //设置默认数据
        if (productSelect.cart_num == undefined) productSelect.cart_num = 1;
        if (changeValue) {
          if (num.cart_num === this.onceNum) {
            return this.$util.Tips({
              title: `该商品每次限购${this.onceNum}${this.storeInfo.unitName}`
            });
          }
          num.cart_num++;
          let arrMin = [];
          arrMin.push(nums);
          arrMin.push(quota);
          // arrMin.push(stock);
          let minN = Math.min.apply(null, arrMin);
          if (num.cart_num >= minN) {
            this.$set(this.attribute.productSelect, "cart_num", minN ? minN : 1);
            this.$set(this, "cart_num", minN ? minN : 1);
          }
          this.$set(this, "cart_num", num.cart_num);
          this.$set(this.attribute.productSelect, "cart_num", num.cart_num);
        } else {
          num.cart_num--;
          if (num.cart_num < 1) {
            this.$set(this.attribute.productSelect, "cart_num", 1);
            this.$set(this, "cart_num", 1);
          }
          this.$set(this, "cart_num", num.cart_num);
          this.$set(this.attribute.productSelect, "cart_num", num.cart_num);
        }
      },
      attrVal(val) {
        this.attribute.productAttr[val.indexw].index = this.attribute.productAttr[val.indexw].attrValues[val
          .indexn];
      },
      /**
       * 属性变动赋值
       * 
       */
      ChangeAttr: function(res) {
        this.$set(this, 'cart_num', 1);
        let productSelect = this.productValue[res];
        if (productSelect) {
          this.$set(this.attribute.productSelect, "image", productSelect.image);
          this.$set(this.attribute.productSelect, "price", productSelect.price);
          this.$set(this.attribute.productSelect, "unique", productSelect.id);
          this.$set(this.attribute.productSelect, "cart_num", 1);
          this.$set(this.attribute.productSelect, "quota", productSelect.quota);
          this.$set(this.attribute.productSelect, "quotaShow", productSelect.quotaShow);
          this.$set(this, "attrValue", res);

          this.attrTxt = "已选择"
        } else {
          this.$set(this.attribute.productSelect, "image", this.storeInfo.image);
          this.$set(this.attribute.productSelect, "price", this.storeInfo.price);
          this.$set(this.attribute.productSelect, "unique", "");
          this.$set(this.attribute.productSelect, "cart_num", 0);
          this.$set(this.attribute.productSelect, "quota", 0);
          this.$set(this.attribute.productSelect, "quotaShow", 0);
          this.$set(this, "attrValue", "");
          this.attrTxt = "已选择"
        }
      },
      // 立即购买
      goCat() {
        if (!this.isLogin) {
          toLogin()
          return
        }
        var that = this;
        var productSelect = this.productValue[this.attrValue];
        //打开属性
        if (this.isOpen)
          this.attribute.cartAttr = true
        else
          this.attribute.cartAttr = !this.attribute.cartAttr
        //只有关闭属性弹窗时进行加入购物车
        if (this.attribute.cartAttr === true && this.isOpen == false) return this.isOpen = true
        //如果有属性,没有选择,提示用户选择
        if (this.attribute.productAttr.length && productSelect === undefined && this.isOpen == true) return that
          .$util.Tips({
            title: '已选择属性'
          });
        var data = {
          productId: that.storeInfo.productId,
          combinationId: parseFloat(that.id),
          cartNum: that.cart_num ? this.cart_num : this.attribute.productSelect.cart_num,
          productAttrUnique: productSelect !== undefined ? productSelect.id : '',
          isNew: true,
        };
        this.$Order.getPreOrder("buyNow", [{
          "attrValueId": parseFloat(this.attribute.productSelect.unique),
          "combinationId": parseFloat(this.id),
          "productNum": parseFloat(this.cart_num ? this.cart_num : this.attribute.productSelect.cart_num),
          "productId": parseFloat(this.storeInfo.productId)
        }]);
      },
      scroll: function(e) {
        var that = this,
          scrollY = e.detail.scrollTop;
        var opacity = scrollY / 200;
        opacity = opacity > 1 ? 1 : opacity;
        that.opacity = opacity
        that.scrollY = scrollY
        if (that.lock) {
          that.lock = false
          return;
        }
        for (var i = 0; i < that.topArr.length; i++) {
          if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
            that.navActive = i
            break
          }
        }
      },
      tap: function(item, index) {
        var id = item.id;
        var index = index;
        var that = this;
        // if (!this.data.good_list.length && id == "past2") {
        //   id = "past3"
        // }
        this.toView = id;
        this.navActive = index;
        this.lock = true;
        this.scrollTop = index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]
      },
    },
    onShareAppMessage() {
      let that = this;
      return {
        title: that.storeInfo.storeName,
        path: '/subpageC/combination_detail/combination_detail?id=' + that.storeInfo.id,
        imageUrl: that.storeInfo.image
      };
    }
  }
</script>

<style scoped lang="scss">
.share {
  width: 60rpx;
        height: 60rpx;
      position: relative;
      display: flex;
      &-img {
        width: 60rpx;
        height: 60rpx;
      }
      &-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
.flex-left {
  flex: 1;
  text-align: left;
}
.fixedtime{
		position: fixed;
		top:100rpx;
		background: rgba(0,0,0,0.5);
		color: #fff;
		z-index: 999;
		left: 0;
		padding: 20rpx;
		border-radius:0 40rpx 40rpx 0;
	}


  .share-box {
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .generate-posters {
    width: 100%;
    height: 170rpx;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translate3d(0, 100%, 0);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    border-top: 1rpx solid #eee;
  }

  .generate-posters.on {
    transform: translate3d(0, 0, 0);
  }

  .generate-posters .item {
    flex: 50%;
    text-align: center;
    font-size: 30rpx;
  }

  .generate-posters .item .iconfont {
    font-size: 80rpx;
    color: #5eae72;
  }

  .generate-posters .item .iconfont.icon-haibao {
    color: #5391f1;
  }

  .navbar .header {
    height: 96rpx;
    font-size: 30rpx;
    color: #050505;
    background-color: #fff;
    /* #ifdef MP */
    padding-right: 95rpx;
    /* #endif */
  }

  .icon-xiangzuo {
    /* #ifdef H5 */
    top: 30rpx !important;
    /* #endif */
  }

  .navbar .header .item {
    position: relative;
    margin: 0 25rpx;
  }

  .navbar .header .item.on:before {
    position: absolute;
    width: 60rpx;
    height: 5rpx;
    background-repeat: no-repeat;
    content: "";
    background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
    bottom: -10rpx;
    left: 50%;
    margin-left: -28rpx;
  }

  .navbar {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
  }

  .navbar .navbarH {
    position: relative;
  }

  .navbar .navbarH .navbarCon {
    position: absolute;
    bottom: 0;
    height: 100rpx;
    width: 100%;
  }

  .icon-xiangzuo {
    color: #000;
    position: fixed;
    font-size: 40rpx;
    width: 100rpx;
    height: 56rpx;
    line-height: 54rpx;
    z-index: 1000;
    left: 33rpx;
  }
  .product-con .nav {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 110rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #E93323;
	}

	.product-con .nav .money {
		font-size: 28rpx;
		color: #fff;
	}

	.product-con .nav .money .num {
		font-size: 48rpx;
	}

	.product-con .nav .money .y-money {
		font-size: 26rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.product-con .nav .time {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
	}

	.product-con .nav .time .timeCon {
		margin-top: 10rpx;
	}

	.product-con .nav .time .timeCon .num {
		padding: 0 7rpx;
		font-size: 22rpx;
		color: #ff3d3d;
		background-color: #fff;
		border-radius: 2rpx;
	}

	.product-con .nav .timeState {
		font-size: 28RPX;
		color: #FFF;
	}

	.product-con .nav .iconfont {
		color: #fff;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
  .product-con .conter img {
	width: 750rpx!important;
	height: unset!important
}

.product-con .wrapper {
	background-color: #fff;
	padding: 30rpx 24rpx;
}


.product-con .wrapper .share .money {
	font-size: 28rpx;
	font-weight: 700
}

.product-con .wrapper .share .money .num {
	font-size: 48rpx
}

.product-con .wrapper .share .money .vip-money {
	color: #282828;
	margin-left: 13rpx
}

.product-con .wrapper .share .money image {
	width: 46rpx;
	height: 21rpx;
	margin-left: 7rpx
}

.product-con .wrapper .share .money .vip-money {
	color: #282828;
	margin-left: 13rpx
}

.product-con .wrapper .share .iconfont {
	color: #999;
	font-size: 36rpx;
	margin-bottom: 10rpx
}

.product-con .wrapper .introduce {
	font-size: 32rpx;
	font-weight: 700;
	margin: 16rpx 0 26rpx 0;
}

.product-con .wrapper .label {
	// margin-bottom: 40rpx;
	font-size: 24rpx;
	color: #82848f;
}
.attribute{
		width: 100%;
		padding: 10rpx 20rpx;
		.line1{
			width: 600rpx;
			font-size: 26rpx;
    		color: #000;
		}
	}
.product-con .wrapper .coupon {
	// height: 80rpx;
	margin-top: 40rpx;
	font-size: 26rpx;
	color: #82848f
}

.product-con .wrapper .coupon .hide {
	// width: 540rpx;
	// height: 80rpx;
	// line-height: 80rpx
}

.product-con .wrapper .coupon .activity {
	// height: 40rpx;
	padding: 0 20rpx;
	border: 1rpx solid #E93323;
	color: #E93323;
	font-size: 24rpx;
	// line-height: 40rpx;
	position: relative;
	margin-left: 4rpx;
}

.product-con .wrapper .coupon .activityBox {
	margin-left: 4rpx;
}

.product-con .wrapper .coupon .activity:before {
	content: ' ';
	position: absolute;
	width: 7rpx;
	height: 10rpx;
	border-radius: 0 7rpx 7rpx 0;
	border: 1rpx solid #f2857b;
	background-color: #fff;
	bottom: 50%;
	left: -3rpx;
	margin-bottom: -6rpx;
	border-left-color: #fff
}

.product-con .wrapper .coupon .activity:after {
	content: ' ';
	position: absolute;
	width: 7rpx;
	height: 10rpx;
	border-radius: 7rpx 0 0 7rpx;
	border: 1rpx solid #f2857b;
	background-color: #fff;
	right: -3rpx;
	bottom: 50%;
	margin-bottom: -6rpx;
	border-right-color: #fff
}

.product-con .wrapper .coupon .iconfont {
	color: #7a7a7a;
	font-size: 24rpx
}

.product-con .attribute {
	background-color: #fff;
	padding: 0 24rpx;
	font-size: 26rpx;
	color: #82848f;
	height: 80rpx
}

.product-con .attribute .iconfont {
	font-size: 24rpx;
	color: #7a7a7a
}

.product-con .userEvaluation {
	// padding: 0 30rpx;
}

.product-con .userEvaluation i{
	font-style: normal;
	margin-left: 8rpx;
	font-size: 24rpx;
	color: #999999;
}

.product-con .userEvaluation .title {
	height: 86rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #282828;
	padding: 0 24rpx;
	border-top-left-radius: 14rpx;
	border-top-right-radius: 14rpx;
}

.product-con .userEvaluation .title .praise {
	font-size: 28rpx;
	color: grey
}

.product-con .userEvaluation .title .praise .iconfont {
	color: #7a7a7a;
	font-size: 24rpx;
	vertical-align: 1rpx;
	margin-left: 8rpx
}

.product-con .product-intro {
	position: relative;
	// margin-top: 20rpx;
	width: 100%;
	overflow: hidden;
}
.product-con .product-intro image {
	width: 20rpx;
	height: 20rpx;
}
.product-con .product-intro .title {
	font-size: 30rpx;
	color: #282828;
	height: 102rpx;
	width: 100%;
	text-align: center;
	line-height: 102rpx
}
.product-con .product-intro .title .sp{
	margin: 0 14rpx;
}

.product-con .product-intro .conter {
	width: 100%;
	word-wrap: break-word;
}

.product-con .product-intro .conter image {
	width: 100%!important;
	display: block!important
}
  .product-con .wrapper {
    margin-top: 30rpx;
    border-radius: 14rpx;
  }

  .product-con .wrapper .share .money .y-money {
    color: #82848f;
    margin-left: 13rpx;
    text-decoration: line-through;
    font-weight: normal;
  }

  .product-con .notice {
    width: 100%;
    height: 62rpx;
    background-color: #ffedeb;
    padding: 0 24rpx;
    box-sizing: border-box;
  }

  .product-con .notice .num {
    font-size: 24rpx;
  }

  .product-con .notice .num .iconfont {
    font-size: 30rpx;
    vertical-align: -3rpx;
    margin-right: 20rpx;
  }

  .product-con .notice .num .line {
    color: #333333;
    margin-left: 15rpx;
  }

  .product-con .notice .swiper {
    height: 100%;
    width: 360rpx;
    line-height: 62rpx;
    overflow: hidden;
    margin-left: 14rpx;
  }

  .product-con .notice .swiper swiper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 24rpx;
    color: #333333;
  }

  .product-con .assemble {
    background-color: #fff;
  }

  .product-con .assemble .item {
    padding-right: 24rpx;
    margin-left: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    height: 130rpx;
  }

  .product-con .assemble .item .pictxt .text {
    width: 172rpx;
    margin-left: 16rpx;
  }

  .product-con .assemble .item .pictxt .pictrue {
    width: 80rpx;
    height: 80rpx;
    background: #f0f0f0;
    border-radius: 50%;
  }

  .product-con .assemble .item .pictxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .product-con .assemble .item .right .lack {
    font-size: 24rpx;
    color: #333333;
  }

  .product-con .assemble .item .right .time {
    position: relative;
    left: -10rpx;
    font-size: 22rpx;
    color: #82848f;
    margin-top: 5rpx;
  }

  .product-con .assemble .item .right .spellBnt {
    font-size: 24rpx;
    color: #fff;
    width: 140rpx;
    height: 50rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #FF5555 0%, #FF0000 100%);
    text-align: center;
    line-height: 50rpx;
    margin-left: 16rpx;
  }

  .product-con .assemble .item .right .spellBnt .iconfont {
    font-size: 25rpx;
    margin-left: 5rpx;
  }

  .product-con .assemble .more {
    font-size: 24rpx;
    color: #333333;
    text-align: center;
    height: 90rpx;
    line-height: 90rpx;
  }

  .product-con .assemble .more .iconfont {
    margin-left: 13rpx;
    font-size: 25rpx;
  }

  .product-con .playWay {
    background-color: #fff;
    padding: 0 24rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .product-con .playWay .title {
    height: 86rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;
  }

  .product-con .playWay .title .iconfont {
    margin-left: 13rpx;
    font-size: 26rpx;
    color: #717171;
  }

  .product-con .playWay .way {
    height: 110rpx;
    line-height: 110rpx;
    font-size: 26rpx;
    color: #333333;
  }

  .product-con .playWay .way .iconfont {
    color: #cdcdcd;
    font-size: 26rpx;
    margin: 0 35rpx;
  }

  .product-con .playWay .way .item .num {
    font-size: 35rpx;
    vertical-align: 4rpx;
    margin-right: 6rpx;
    display: inline-block;
  }

  .product-con .playWay .way .item .tip {
    font-size: 22rpx;
    color: #a5a5a5;
    margin-top: 7rpx;
  }

  .product-con .footer {
    padding: 0 20rpx 0 30rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;
    background-color: #fff;
    z-index: 999;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;
  }

  .product-con .footer .item {
    font-size: 18rpx;
    color: #666;
  }

  .product-con .footer .item .iconfont {
    text-align: center;
    font-size: 40rpx;
  }

  .product-con .footer .item .iconfont.icon-shoucang1 {
    color: #f00;
  }

  .product-con .footer .item .iconfont.icon-gouwuche1 {
    font-size: 40rpx;
    position: relative;
  }

  .product-con .footer .item .iconfont.icon-gouwuche1 .num {
    color: #fff;
    position: absolute;
    font-size: 18rpx;
    padding: 2rpx 8rpx 3rpx;
    border-radius: 200rpx;
    top: -10rpx;
    right: -10rpx;
  }

  .product-con .footer .bnt {
    flex: 1;
    height: 76rpx;
  }

  .product-con .footer .bnt .bnts {
    width: 100%;
    text-align: center;
    line-height: 76rpx;
    color: #fff;
    font-size: 28rpx;
  }

  .product-con .footer .bnt .joinCart {
    border-radius: 50rpx 0 0 50rpx;
    background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
  }

  .product-con .footer .bnt .buy {
    border-radius:50rpx;
    background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
  }

  .setCollectBox {
    font-size: 18rpx;
    color: #666;
  }

  .canvas {
    position: fixed;
    z-index: -5;
    opacity: 0;
  }

  .poster-pop {
    width: 450rpx;
    height: 714rpx;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    top: 50%;
    margin-top: -357rpx;
  }

  .poster-pop image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .poster-pop .close {
    width: 46rpx;
    height: 75rpx;
    position: fixed;
    right: 0;
    top: -73rpx;
    display: block;
  }

  .poster-pop .save-poster {
    background-color: #df2d0a;
    font-size: ：22rpx;
    color: #fff;
    text-align: center;
    height: 76rpx;
    line-height: 76rpx;
    width: 100%;
  }

  .poster-pop .keep {
    color: #fff;
    text-align: center;
    font-size: 25rpx;
    margin-top: 10rpx;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9;
  }

  .pro-wrapper .iconn {
    background-image: url('');
    width: 100rpx;
    height: 100rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }

  .pro-wrapper .iconn.iconn1 {
    background-image: url('');
  }

  .home-nav {
    /* #ifdef H5 */
    top: 20rpx !important;
    /* #endif */
  }

  .home-nav {
    color: #fff;
    position: fixed;
    font-size: 33rpx;
    width: 56rpx;
    height: 56rpx;
    z-index: 999;
    left: 33rpx;
    background: rgba(190, 190, 190, 0.5);
    border-radius: 50%;

    &.on {
      background: unset;
      color: #333;
    }
  }

  .home-nav .line {
    width: 1rpx;
    height: 24rpx;
    background: rgba(255, 255, 255, 0.25);
  }

  .home-nav .icon-xiangzuo {
    width: auto;
    font-size: 28rpx;
  }

  .share-box {
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .share-box image {
    width: 100%;
    height: 100%;
  }
</style>